<template>
  <div>
    <div class="db-top">
      <div class="db-top-lf"><span class="db-top-lfzoom">Zoom：</span>
        <el-slider v-model="zoomData" :max="10" @change="changeSliderZoom"/>
      </div>
      <div class="db-top-rt">
        <div class="db-top-rtcon">
          <!-- <div class="db-top-rtReset" @click="reset">
            <el-icon><RefreshRight /></el-icon>
            <span v-lang="{lang: controlSto.language, lgid: -97}">Reset</span>
          </div> -->
          <div class="load-cont">
            <div class="filter-cont" @click="dowmImage">
                <div class="img-wrap">
                    <el-image class="load-img show-img" :src="loadImg" fit="contain" />
                    <el-image class="load-img hover-img" :src="loadhoverImg" fit="contain" />
                    <el-image class="load-img active-img" :src="loadactiveImg" fit="contain" />
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="graph-equila">
      <uiEchart style="width: 1000px;height: 360px;" :config="chartOpt" id="uiCahrt" ref="graphCanvas" v-show="!loadingNetWork && !noDataFlag"/>
      <div class="no-data-box" v-show="loadingNetWork">
          <img :src="Loading"/>
          <div class="no-data-txt" v-lang="{lang: controlSto.language, lgid: '-131'}">loading...</div>
      </div>
      <div class="no-data-box" v-show="!loadingNetWork && noDataFlag">
          <img :src="NodtaPng"/>
          <div class="no-data-txt" v-lang="{lang: controlSto.language, lgid: '-118'}">暂无数据</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed, reactive, toRefs, ref, watch, nextTick } from 'vue'
import loadImg from '@/assets/img/load.png'
import loadhoverImg from '@/assets/img/load-hover.png'
import loadactiveImg from '@/assets/img/load-active.png'
import Loading from '@/assets/img/loading.gif'
import NodtaPng from '@/assets/img/noData.png'
import { calculateEquilateralTriangleCoords, saveImageWithWhiteBackground } from '@/utils/util'
import { nData } from '@/utils/datagraph'
import { controlStore } from '@/stores/control'
const props = defineProps({
  landNum: {
    type: Number,
    default: 8
  },
  dbData: {
    type: Array,
    default: nData
  },
  loadingNetWork: {
    type: Boolean,
    default: false
  },
  noDataFlag: {
    type: Boolean,
    default: true
  }
})
const { landNum, dbData } = toRefs(props);
const controlSto = controlStore();
const zoomData = ref(1)
const graphCanvas = ref(null);
const calXY = () => {
  if (dbData.value.length == 0) return;
  const nArr = calculateEquilateralTriangleCoords(20, landNum.value)
  dbData.value.nodes.forEach((e, index) => {
    e.x = nArr[index].x;
    e.y = nArr[index].y;
    e.itemStyle = {
      color: '#1677FF'
    }
    e.symbolSize =20;
    e.lineStyle = {
      color: "#1677FF",
      width: 2
    }
  })
}
const chartOpt = computed(() => {
  calXY()
  
  let option = {
    grid: {
      top: 0,
    },
		tooltip: {},
		toolbox: {
			show: true,
		},
    lineStyle: {
      color: "#138848",
      width: 2
    },
		series: [
					{
							name: 'Les Miserables',
							type: 'graph',
							layout: 'none',
							data: dbData.value.nodes,
							links: dbData.value.links,
							// categories: graph.categories,
							roam: true,
              zoom: zoomData.value,
							label: {
									show: true,
									position: 'right',
									formatter: '{b}'
							},
							labelLayout: {
									hideOverlap: true
							},
							scaleLimit: {
									min: 0.4,
									max: 2
							},
							lineStyle: {
									color: 'source',
									curveness: 0.3
              }
					}
		]
	};

	return option;
})
const changeSliderZoom = (e) => {
  zoomData.value = e;
  graphCanvas.value.initEchart()
}
const reset = () => {
  zoomData.value = 1;
  graphCanvas.value.initEchart()
}
const dowmImage = () => {
  const canvas = document.querySelector('#uiCahrt canvas');
  saveImageWithWhiteBackground(canvas)  
}
watch(() => dbData.value, (n, v) => {
  if (n !=v) {
    chartOpt.value.series[0].data = dbData.value.nodes;
    chartOpt.value.series[0].links = dbData.value.links;
    console.log(dbData.value, '------))))))')
    graphCanvas.value.initEchart();
    nextTick(() => {
      graphCanvas.value.initEchart()
    })
  }
})
</script>
<style lang="scss" scoped>
.db-top {
  display: flex;
  justify-content: space-between;
  .db-top-lf {
    width: 200px;
    display: flex;
    .db-top-lfzoom {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
      line-height: 20px;
      text-align: left;
      font-style: normal;
      margin-right: 16px;
      line-height: 32px;
    }
  }
  .db-top-rt {
    width: 200px;
    // min-width: 300px;
    .db-top-rtcon {
      display: flex;
      width: 100%;
      display: -webkit-inline-box;
      text-align: right;
      .db-top-rtReset {
        width: 90px;
        height: 32px;
        background: #BC9F77;
        border-radius: 4px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 22px;
        text-align: center;
        font-style: normal;
        line-height: 32px;
        cursor: pointer;
        margin-right: 16px;
        .el-icon {
          width: 20px;
          height: 20px;
          vertical-align: text-bottom;
        }
      }
      .load-cont {
        width: 44px;
        height: 32px;
        padding: 0 6px 0 8px;
        line-height: 32px;
        text-align: center;
        border: 1px solid #BC9F77;
        border-radius: 4px;
        color: #BC9F77;
        user-select: none;
        cursor: pointer;
        &:hover {
            color: #E6C896;
            .hover-img {
                display: inline-block;
            }
            .show-img, .active-img {
                display: none;
            }
        }
        &:active {
            color: #967846;
            .active-img {
                display: inline-block;
            }
            .hover-img, .show-img {
                display: none;
            }
        }
        .hover-img, .active-img {
            display: none;
        }
        .img-wrap {
            position: relative;
            display: inline-block;
            top: 2px;
            .load-img {
                height: 16px;
            }
        }
        .arrow-box {
            padding-left: 6px;
        }
      }
    }
  }
}
.graph-equila {
  height: 360px;
  .no-data-box {
    width: 100%;
    height: 264px;
    text-align: center;
    position: relative;
    img {
        margin-top: 20px;
    }
    .no-data-txt {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #BC9F77;
        line-height: 20px;
        text-align: center;
        font-style: normal;
        position: absolute;
        width: 100%;
        bottom: 60px;
    }
  }
}
</style>

<style lang="scss">
  .db-top-lf {
    .el-slider__runway {
      background: #E4E7ED;
      // height: 32px;
      position: relative;
      .el-slider__bar {
        background: #BC9F77;
        // height: 40px;
        position: absolute;
        // top: -8px;
      }
      .el-slider__button {
        width: 20px;
        height: 20px;
        background: #FFFFFF;
        border: 1px solid #BC9F77;
      }
      .el-slider__button-wrapper {
        // margin-top: 10px;
      }
    }
  }
</style>
